<template>
	<view class="content" v-if="requestStatus">
		<view class="card" v-for="(item,index) in userInfoIntroList" @click="goDetail(item.user_id)" :key="index">
			<!-- 图片 -->
			<view class="pic">
				<image :src="item.imgList[0]" mode="aspectFill"></image>
				<view class="like">
					<image :src="item.likeme?like:nolike" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 个人信息 -->
			<view class="info">
				<!-- 姓名 -->
				<view class="name">
					{{item.nickName}}
				</view>
				<image :src="item.sex == '女'?womenImg:manImg" mode="aspectFill"></image>
			</view>
			<!-- 其他信息 -->
			<view class="data">
				<view class="age">
					{{item.age}}岁
				</view>
				<view class="">
					{{item.height}}cm
				</view>
				<view class="">
					{{item.education}}
				</view>
				<view class="money">
					{{item.money}}
				</view>
			</view>
			<!-- 位置 -->
			<view class="location">
				{{item.redidence}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userInfoIntroList: [],
				womenImg: '../../static/woman.png',
				manImg: '../../static/man.png',
				like: '../../static/like.png',
				nolike: '../../static/nolike.png',
				requestStatus: false,
				token: '',
				user_id: '',
				hasMore: false,
				pageSize: 5,
				page: 1,
				isFirst: true,
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("UserInfo");
			let {
				token,
				uid
			} = userInfo;
			this.token = token;
			this.user_id = uid;
			this.getPageInfo()
		},
		onReady() {
			this.isFirst = false
		},
		onTabItemTap() {
			if (!this.isFirstEnter) {
				this.userInfoIntroList = []
				this.getUsersInfo()
			}
		},
		onReachBottom() {
			if (this.hasMore) {
				this.getUsersInfo() //调用函数
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			} else {
				uni.showToast({
					title: '没有更多数据了！',
					icon: 'none'
				})
			}
		},
		methods: {
			getPageInfo(){
				this.page = 1;
				this.getUsersInfo() //调用函数
			},
			goDetail(e) {
				let id = e;
				uni.navigateTo({
					url: "../detail/detail?id=" + id
				})
			},
			getUsersInfo() {
				uni.showLoading({
					title: '正在加载中'
				})
				this.$api.users_allget({
						page: this.page,
						pageSize: this.pageSize
					}).then((res) => {
						this.hasMore = res.hasMore //云端返回的是否有更多数据
						if (this.hasMore) {
							this.page = this.page + 1
						}
						let userInfoIntroList = res.data.data
						if (userInfoIntroList) {
							userInfoIntroList.forEach((item) => {
								item.likeme = false
								item.age = this.jsGetAge(item.birth)
								if (item.likemeList && item.likemeList.indexOf(this.user_id) !== -1) {
									item.likeme = true
								}
							})
						}
						this.userInfoIntroList = this.userInfoIntroList.concat(userInfoIntroList)
						this.requestStatus = true
						uni.hideLoading()
					})
					.catch((res) => {
						console.log(res, 'pppppppp')
						this.requestStatus = true
						uni.hideLoading()
					})
			},
			jsGetAge(strBirthday) {
				var returnAge;
				var strBirthdayArr = strBirthday.split("-");
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];
				let d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁  
				} else {
					var ageDiff = nowYear - birthYear; //年之差  
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差  
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差  
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天  
					}
				}
				return returnAge; //返回周岁年龄    
			},

		}
	}
</script>

<style>
	.content {
		background: #fff;
	}

	.card {
		padding: 31rpx;
		padding-bottom: 86rpx;
		position: relative;
		border-bottom: 16rpx solid #f1f1f1;
	}

	.card .pic image {
		width: 688rpx;
		height: 686rpx;
		border-radius: 32rpx;
		position: relative;
	}

	.card .pic .like {
		width: 88rpx;
		height: 88rpx;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		right: 62rpx;
		bottom: 261rpx;
	}

	.card .pic .like image {
		width: 40rpx;
		height: 38rpx;
		margin-left: 25rpx;
		margin-top: 28rpx;
	}

	.card .info {
		overflow: hidden;
	}

	.card .info .name {
		font-weight: bold;
		font-size: 30rpx;
		line-height: 80rpx;
		display: inline-block;
	}

	.card .info image {
		width: 39rpx;
		height: 39rpx;
		margin-left: 5rpx;
		margin-top: 23rpx;
		border-radius: 4rpx;
		vertical-align: top;
		display: inline-block;
	}

	.card .data view {
		font-size: 26rpx;
		color: #9f9f9f;
		padding: 0 26rpx;
		border-right: 2px solid #e0e0e0;
		display: inline-block;
	}

	.card .data .age {
		padding-left: 0;
	}

	.card .data .money {
		border: none;
	}

	.card .location {
		font-size: 24rpx;
		color: #a8a8a8;
		position: absolute;
		right: 31rpx;
		bottom: 145rpx;
	}
</style>
